<template>
    <p>
        {{ mainStore.count }}
    </p>
    <p>
        {{ mainStore.foo }}
    </p>
    <p>
        {{ mainStore.arr }}
    </p>
    <p>{{ mainStore.count10 }}</p>
    <p>{{ mainStore.count10 }}</p>
    <p>{{ mainStore.count20 }}</p>
    <p>{{ mainStore.count20 }}</p>
    <button @click="handleChangeState">修改数据</button>
</template>
<script lang="ts">
import {userMainStore} from "../store/index";

export default {
    components: {
        userMainStore
    },
    data() {
        return {
            mainStore: userMainStore()
        }
    },
    methods: {
        handleChangeState() {
            // 方式一：最简单的方式，在组件内操作state
            // this.mainStore.count++
            // this.mainStore.foo = "hello"

            // 方式二：如果需要修改多个数据，建议使用$patch批量更新，有性能优化
            // this.mainStore.$patch({
            //     count: this.mainStore.count + 1,
            //     foo: 'Hello $patch',
            //     arr: [...this.mainStore.arr, 4]
            // })

            // 方式三：更好的批量更新的方式：$patch一个函数
            // this.mainStore.$patch(state => {
            //     state.count++
            //     state.foo = 'Hello $patch funciton'
            //     state.arr.push(4)
            // })

            // 方式四：逻辑比较多的时候，可以封装到actons中做处理
            this.mainStore.changeState(10)
        }
    }
}
</script>